import { FC, useEffect, useState } from "react";
import Https from "@/utils/Https";
import { Descriptions, message, Select, Spin } from "antd";
import { vipTypeList } from "@/utils/common/index";
import moment from "moment";
import dayjs from "dayjs";
import { EditOutlined } from "@ant-design/icons";
interface propType {
  courseType: number | string;
  id: number | string;
}
const AppointmentDetails: FC<propType> = (props) => {
  const { courseType, id } = props;
  const [info, setInfo] = useState<any>();
  const [loading, setLoading] = useState(false);
  const [isEdit, setIsEdit] = useState(false);
  const [roomList, setRoomList] = useState([]);
  useEffect(() => {
    getDetails(id, courseType);
  }, [props]);

  //获取预约详情
  const getDetails = async (id, type) => {
    let obj = {
      id: id,
      courseType: type,
    };
    setLoading(true);
    let res: any = await Https.post("/book/record/recordDetail", obj, true);
    if (res.code && res.data) {
      setInfo(res.data);
    } else {
      message.error(res.msg);
    }
    setLoading(false);
  };
  //获取可用教室列表
  const getClassroomList = async () => {
    let params = {
      bookRecordId: id,
      startTime: info.bookStartTime,
      endTime: info.bookEndTime,
    };
    let res = await Https.get(
      "/book/record/availableClassroomList",
      params,
      true
    );
    if (res.code == 200 && res.data) {
      setRoomList(res.data);
    } else {
      message.error(res.msg);
    }
  };
  //修改教室
  const updateClassRoom = async (e) => {
    console.log(e, "-e");
    let url = e
      ? "/book/record/changeClassRoom"
      : `/classRoomOccupancy/deleteById/${info.classRoomOccupancyId}`;
    let params = {
      id: info.id,
      classRoomId: e,
    };
    setLoading(true);
    let res = await Https.post(url, e ? params : {}, true);
    setLoading(false);
    if (res.code == 200) {
      message.success("操作成功");
      setIsEdit(false);
      getDetails(id, courseType);
    } else {
      message.error(res.msg);
    }
    console.log(res, "_res");
  };
  const statusList = {
    1: "排队中",
    2: "已预约",
    3: "已完成",
    4: "已取消",
  };
  return (
    info && (
      <Spin spinning={loading}>
        {info.payType == 1 && (
          <Descriptions title="支付信息" column={2}>
            <Descriptions.Item label="支付方式">微信支付</Descriptions.Item>
            <Descriptions.Item label="支付金额">
              ¥{Number(info.payValue) / 100}元
            </Descriptions.Item>
            <Descriptions.Item label="订单号">{info.orderNo}</Descriptions.Item>
          </Descriptions>
        )}
        {info.payType == 0 && (
          <Descriptions title="用户会员卡信息" column={2}>
            <Descriptions.Item label="卡号">{info.cardNo}</Descriptions.Item>
            <Descriptions.Item label="卡名称">
              {info.cardName}
            </Descriptions.Item>
            <Descriptions.Item label="卡类型">
              {info.vipType ? vipTypeList[info.vipType].text : "-"}
            </Descriptions.Item>
            <Descriptions.Item label="卡种类">
              {info.vipCategory == 1 ? "正式卡" : "体验卡"}
            </Descriptions.Item>
            <Descriptions.Item label="持卡人">
              {info.userName || "-"}
            </Descriptions.Item>
            <Descriptions.Item label="手机号">
              {info.phone || "-"}
            </Descriptions.Item>
            <Descriptions.Item label="有效期至">
              {info.uvipCardEffectiveTime
                ? moment(info.uvipCardEffectiveTime).format("YYYY-MM-DD")
                : ""}
            </Descriptions.Item>
            <Descriptions.Item label="扣除后余额">
              {info.vipType == 2
                ? "-"
                : (info && info.leftValue) || info.leftValue == 0
                ? info.vipType == 1
                  ? Number(info.leftValue) / 100 +
                    vipTypeList[info.vipType].status
                  : Number(info.leftValue) + vipTypeList[info.vipType].status
                : "-"}
            </Descriptions.Item>
          </Descriptions>
        )}
        <Descriptions
          title="预约课程信息"
          column={2}
          style={{ marginTop: "20px" }}
        >
          <Descriptions.Item label="课程名称">
            {info.courseName}
          </Descriptions.Item>
          <Descriptions.Item label="预约上课时间">
            {dayjs(info.bookStartTime).format("YYYY-MM-DD HH:mm")}-
            {dayjs(info.bookEndTime).format("HH:mm")}
          </Descriptions.Item>
          <Descriptions.Item label="单课时长">
            {info.courseDuration}分钟
          </Descriptions.Item>
          <Descriptions.Item label="授课老师">
            {info.courseCoachName}
          </Descriptions.Item>
          <Descriptions.Item label="预约人数">
            {info.appointPeopleNum}人
          </Descriptions.Item>
          {info.payType == 1 && (
            <Descriptions.Item label="扣除">
              ¥{Number(info.payValue) / 100}元
            </Descriptions.Item>
          )}
          {info.payType == 0 && (
            <Descriptions.Item label="扣除">
              {info.vipType == 2
                ? "-"
                : (info && info.payValue) || info.payValue == 0
                ? info.vipType == 1
                  ? Number(info.payValue) / 100 +
                    vipTypeList[info.vipType].status
                  : Number(info.payValue) + vipTypeList[info.vipType].status
                : "-"}
            </Descriptions.Item>
          )}
          <Descriptions.Item label="上课教室">
            {!isEdit ? (
              <>
                <span>{info.classRoomName ? info.classRoomName : "-"}</span>
                {info.status == 2 && (
                  <EditOutlined
                    onClick={() => {
                      setIsEdit(true);
                      getClassroomList();
                    }}
                    style={{ color: "#02a7f0", marginLeft: "10px" }}
                  />
                )}
              </>
            ) : (
              <Select
                placeholder="请选择"
                allowClear
                style={{ width: "200px" }}
                value={info.classRoomName}
                onChange={(e) => {
                  updateClassRoom(e);
                }}
              >
                {roomList &&
                  roomList.length > 0 &&
                  roomList.map((item) => (
                    <Select.Option value={item.id} key={item.id}>
                      {item.classRoomName}
                    </Select.Option>
                  ))}
              </Select>
            )}
          </Descriptions.Item>
          <Descriptions.Item label="备注">{info.remark}</Descriptions.Item>
        </Descriptions>
        <Descriptions title="预约信息" column={2} style={{ marginTop: "20px" }}>
          <Descriptions.Item label="预约状态">
            {statusList[info.status]}
          </Descriptions.Item>
          <Descriptions.Item label="预约时间">
            {info.createTime ? info.createTime : ""}
          </Descriptions.Item>
          <Descriptions.Item label="操作人">
            {info.bookOperator}
          </Descriptions.Item>
        </Descriptions>
      </Spin>
    )
  );
};

export default AppointmentDetails;
